<template>
  <div class="my">
    <div class="top">
      <van-icon name="comment-o" v-tap="{methods:mymessage}"></van-icon>
    </div>
    <div class="info">
      <div class="head">
        <img :src="info.uheader" alt />
        <div class="vip"></div>
      </div>
      <p class="number">{{info.uname}}</p>
      <div class="title">
        <van-tag mark type="warning">Z0</van-tag>
        <span class="tname" v-tap="{methods:center}">新晋造作生活家</span>
        <van-icon name="arrow" v-tap="{methods:center}" />
      </div>
    </div>
    <div class="wrap">
      <ul class="nav">
        <li v-tap="{methods:nomoney}">
          <i class="iconfont icon-qianbao"></i>
          <span>未付款</span>
        </li>
        <li v-tap="{methods:havemoney}">
          <i class="iconfont icon-cangkuguanli"></i>
          <span>已付款</span>
        </li>
        <li v-tap="{methods:finish}">
          <i class="iconfont icon-lipin"></i>
          <span>已完成</span>
        </li>
        <li v-tap="{methods:other}">
          <i class="iconfont icon-RectangleCopy"></i>
          <span>其他渠道</span>
        </li>
        <li v-tap="{methods:showcenter}">
          <i class="iconfont icon-xiangji"></i>
          <span>晒单中心</span>
        </li>
      </ul>
    </div>
    <div class="imgWrap">
      <img src="../assets/my.png" alt />
    </div>
    <div class="container">
      <ul>
        <li v-tap="{methods:center}">
          <span>会员中心</span>
          <van-icon name="arrow" />
        </li>
        <li v-tap="{methods:privilege}">
          <span>我的优惠券</span>
          <van-icon name="arrow" />
        </li>
        <li v-tap="{methods:gift}">
          <span>我的礼品卡</span>
          <van-icon name="arrow" />
        </li>
        <li v-tap="{methods:collect}">
          <span>我的收藏</span>
          <van-icon name="arrow" />
        </li>
        <li v-tap="{methods:tap}">
          <span>在线客服</span>
          <van-icon name="arrow" />
        </li>
        <li v-tap="{methods:address}">
          <span>收货地址</span>
          <van-icon name="arrow" />
        </li>
        <li v-tap="{methods:setting}">
          <span>设置</span>
          <van-icon name="arrow" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as api from "../api/User";

// window.history.go(0);
export default {
  name: "my",
  data() {
    return {
      info: {
        uname: "",
        birthday: "",
        usex: "",
        vip: "",
        uheader: ""
      }
    };
  },
  methods: {
    mymessage() {
      this.$router.push("/mymessage");
    },
    nomoney() {
      this.$router.push("/nomoney");
    },
    havemoney() {
      this.$router.push("/havemoney");
    },
    finish() {
      this.$router.push("/finish");
    },
    other() {
      this.$router.push("/other");
    },
    showcenter() {
      //   this.$router.push("/lifeshowcenter");
    },
    center() {
      this.$router.push("/membercenter");
    },
    privilege() {
      this.$router.push("/myprivilege");
    },
    gift() {
      this.$router.push("/mygiftcard");
    },
    collect() {
      this.$router.push("/mycollect");
    },
    tap() {
      console.log("aa");
      //   this.$router.push("/membercenter");
    },
    address() {
      this.$router.push("/insertaddress");
    },
    setting() {
      this.$router.push("/setting");
    }
  },
  mounted() {
    if (localStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      api.getOneUser().then(data => {
        this.info = data.data.result[0];
        if (this.info.uheader == "null" || this.info.uheader == null) {
          this.info.uheader =
            "http://47.96.143.29/img/default.jpeg";
        }
        if (this.info.vip == 1) {
          document.getElementsByClassName("vip")[0].style.backgroundImage =
            "url(http://47.96.143.29/img/vip.png)";
          document.getElementsByClassName("vip")[0].style.backgroundRepeat =
            "norepeat";
          document.getElementsByClassName("vip")[0].style.backgroundSize =
            "cover";
        }
      });
    }
  }
};
</script>

<style scoped>
.top {
  overflow: hidden;
}
.top .van-icon {
  float: right;
  margin: 20px;
  font-size: 40px;
}
.info {
  padding: 0 30px;
  margin-bottom: 30px;
}
.info .head {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
  position: relative;
}
.info .head img {
  width: 100%;
  z-index: -20;
  border-radius: 50%;
}
.info .head .vip {
  width: 120%;
  height: 120%;
  position: absolute;
  z-index: 100;
  top: -28%;
  left: -10%;
}
.info .number {
  font-size: 28px;
  margin-top: 0;
}
.info .tname {
  margin: 0 10px;
}
.wrap .nav {
  width: 100%;
  height: 150px;
  display: flex;
}
.wrap .nav li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrap .nav li i {
  font-size: 50px;
}
.wrap .nav li span {
  margin-top: 20px;
  font-size: 24px;
}
.imgWrap {
  margin-top: 20px;
}
.imgWrap img {
  width: 100%;
}
.container {
  margin-bottom: 400px;
}
.container ul {
  background: #fff;
}
.container ul li {
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  line-height: 100px;
  padding: 0 30px;
  position: relative;
  border-bottom: solid 1px #eee;
}
.container ul li span {
  float: left;
  font-size: 28px;
  font-weight: 600;
}
.container ul li .van-icon {
  float: right;
  margin-top: 45px;
  font-size: 28px;
}
</style>